<!--
* @author wn
* @date 2022/10/24 11:02:55
* @description: Layout tags 组件    圆形  round
* 不是主页 全部可以关闭
* 当前路由对应标签 高亮显示
* 点击导航路由
!-->
<template>
	<div class="app-tags">
		<el-tag
			v-for="(tag, index) in tags"
			:key="tag.name"
			size="large"
			round
			:disable-transitions="true"
			:closable="tag.name !== 'home'"
			:effect="$route.path === tag.path ? 'dark' : 'plain'"
			@click="tagClick(tag)"
			@close="tagClose(tag, index)"
		>
			{{ tag.label }}
		</el-tag>
	</div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

// vuex 获取 tags
const store = useStore()
const tags = store.state.common.tabsList
// 点击 跳转 对应 路由  修改面包屑
const router = useRouter()
const tagClick = ({ path, label }) => {
	store.commit('common/setBreadcrumb', { path, label })
	router.push(path)
}
/**
 * 移除 tag
 * 1 删除的 tag.path 不是当前路由 直接删除
 * 2 是当前路由
 * 如果是最后一个 删除自己 向前一个
 * 不是最后一个   删除自己 向后一个
 */
const route = useRoute()
const tagClose = (tag, index) => {
	if (route.path === tag.path) {
		const toTag = tags.length - 1 === index ? tags[index - 1] : tags[index + 1]
		router.push(toTag.path)
		store.commit('common/setBreadcrumb', {
			path: toTag.path,
			label: toTag.label,
		})
	}
	store.commit('common/CloseTab', tag)
}
</script>
<style scoped lang="scss">
.app-tags {
	padding: 20px 20px 0;
	.el-tag {
		margin-right: 15px;
		cursor: pointer;
	}
}
</style>
